Ext.define("FrontSuite.view.TrackedUrlGrid", {
    extend:  'Ext.grid.Panel',
    xtype:   'fs-tracked-url-grid',
    require: [
        // 'Ext.selection.CellModel',
        'Ext.selection.RowModel',
        'Ext.grid.plugin.RowEditing'
    ],
    frame:   true,
    iconCls: 'icon-user',
    title:   'Tracked URLs',
    autoScroll  : true,
    stripeRows  : true,
    columnLines : true,
    selType: 'rowmodel',
    //selType: 'cellmodel',
    selModel    : {
        preventWrap: true
    },
    emptyText: 'There are no matching tracked URLs',

    // We do the minimum in the constructor that we can.
    // This amounts to doing something with non-standard constructor arguments.
    // We do the rest in initComponent().
    //constructor: function (config) {
    //    this.initConfig(config);
    //    this.superclass.constructor.call(this, config);
    //},

    // Within initComponent(), we do the most possible within Ext.apply() and a minimum in code outside of it.
    // We prefer setting any object attributes via Ext.apply() rather than "this.attribute = value".
    // The main reason we use this.createXXX() methods rather than just specifying a config in Ext.apply() is that
    // there are extensive handlers on some of these widgets, and inclusion of that code in the config would decrease
    // ease-of-understanding of the code.
    // However, this is not a mandatory general pattern. Any widget which is simple enough to be described
    // simply with a config in Ext.apply() should be done that way rather than with a this.createXXX() method.
    // The key is which method makes the code easier to read and understand in its entirety.
    initComponent: function() {
        this.rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
        Ext.apply(this, {
            plugins: [this.rowEditing],
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', function(selModel, selections){
            this.down('#delete').setDisabled(selections.length === 0);
        }, this);
    },

    columns: [
        { dataIndex: 'url_id',        text: 'URL ID',        sortable: true},
        { dataIndex: 'auth_required', text: 'Auth Required', sortable: true, field: { xtype: 'textfield' }},
        { dataIndex: 'url_category',  text: 'URL Category',  sortable: true, field: { xtype: 'textfield' }},
        { dataIndex: 'url_type',      text: 'URL Type',      sortable: true, field: { xtype: 'textfield' }},
        { dataIndex: 'url_title',     text: 'URL Title',     sortable: true, field: { xtype: 'textfield' }, flex: 1 },
        { dataIndex: 'url',           text: 'URL',           sortable: true, field: { xtype: 'textfield' }, flex: 1 }
    ],
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            itemId: 'add',
            text: 'Add',
            iconCls: 'icon-add',
            handler: function(){
                var grid = this.up('fs-tracked-url-grid');
                grid.store.insert(0, new FrontSuite.model.TrackedUrl());
                grid.rowEditing.startEdit(0, 0);
            }
        }, '-', {
            itemId: 'delete',
            text: 'Delete',
            iconCls: 'icon-delete',
            disabled: true,
            handler: function(){
                var grid = this.up('fs-tracked-url-grid');
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    grid.store.remove(selection);
                }
            }
        }]
    }]
});


